//useReactive:一种具备响应式的useState,用法与useState类似，但可以动态地设置值。
/* 
问：什么是响应式？

答：响应式是指能及时更新的数据，比如 let count = 0; count = 7；那么此时 count 的值就为 7，这样的数据就是响应式。

这里尤其注意一点，函数式组件是无法通过上面这种方式来更新视图，要牢记，有的小伙伴可能看着看着就懵了，觉得本来就这样，实际不然，所以一定要熟记概念。

*/
import useUpdate from './useUpdate';
import useCreation from './useCreation';
import useLatest from './useLatest';

const observer = <T extends Record<string, any>>(
  initialVal: T,
  cb: () => void
): T => {
  const proxy = new Proxy<T>(initialVal, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      return typeof res === 'object'
        ? observer(res, cb)
        : Reflect.get(target, key);
    },
    set(target, key, val) {
      const ret = Reflect.set(target, key, val);
      cb();
      return ret;
    },
  });

  return proxy;
};

const useReactive = <T extends Record<string, any>>(initialState: T): T => {
  const ref = useLatest<T>(initialState);
  const update = useUpdate();

  const state = useCreation(() => {
    return observer(ref.current, () => {
      update();
    });
  }, []);

  return state;
};

export default useReactive;
